<template>
  <view class="register-container">

   <view class="title">
		申请注册账号
   </view>
   <view class="desc">
		立即注册，开启您的专属体验
   </view>
   
   <view  class="input-item">
	    <view class="cuIcon-mobilefill icon"></view>
		<view class="phone-desc">
			<text>+86</text>
			<text class="cuIcon-unfold"></text>
		</view>
		<input   v-model="loginForm.username" class="input" type="text" placeholder="请输入手机号"
			maxlength="11" />
		<view class="rule-text">
			{{formRule.usernameRule}}
		</view>
   </view>
   <view  class="input-item ">
   	    <view class="cuIcon-safe icon"></view>
   		<input  v-model="loginForm.yzm" class="input yzm-inp"   type="text" placeholder="请输入验证码"
   			maxlength="6" />
		<view class="yzm-text" v-if="isGetYzm" @click="getYzm">
			获取验证码
		</view>
		<view class="yzm-text num" v-else>
			请在{{yzmNum}}秒后重试
		</view>
		<view class="rule-text">
			{{formRule.yzmRule}}
		</view>
		
   </view>
   <view  class="input-item ">
   	    <view class="cuIcon-lock icon"></view>
   		<input  v-model="loginForm.userpwn" class="input" :password="!isPwnStatus"  type="text" placeholder="请设置6~12位密码"
   			maxlength="12" />
		<view class="cuIcon-attentionfill fillicon" v-if="isPwnStatus" @click="isPwnStatus=!isPwnStatus"></view>	
		<view class="cuIcon-attentionforbidfill fillicon" v-else @click="isPwnStatus=!isPwnStatus"></view>	
		<view class="rule-text">
			{{formRule.userpwnRule}}
		</view>
		
   </view>

   
   <button :class="loading ?'loading':''" @click="register"  class="zx-btn login-btn">注册账号</button>

   
  </view>
</template>

<script>
let rule = getApp().globalData.config.rule
  export default {
    data() {
      return {
		    isPwnStatus:false,
			isGetYzm:true,
			yzmNum:10,
			loading:false,//注册请求加载中
			loginForm:{
				username:"",
				yzm:"",
				userpwn:"",
				
			},
			formRule: {
				usernameRule: "",
				yzmRule: "",
				userpwnRule: "",
			}
        }
    },
    created() {
    
    },
	mounted() {

	},
    methods: {
		//获取验证码
		getYzm(){
			this.isGetYzm=false
			let time=setInterval(()=>{
				this.yzmNum--
				if(this.yzmNum==0){
					clearInterval(time)
					this.isGetYzm=true;
					this.yzmNum=10;
				}
			},1000)
			//获取请求接口
			
		},
		//注册
		register(){
			if (this.verify()) {
				this.loading = true
				setTimeout(() => {
					this.loading = false
				}, 2000)
			
			
			}
			
		},
		//验证规则
		verify() {
			let keys = Object.keys(this.formRule);
			let num = 0;
			
			if (!rule.phone.test(this.loginForm.username)) {
				
				this.formRule.usernameRule = "请输入正确手机号"

			} else {
				this.formRule.usernameRule = ""
				num++
			}
			
			if (!this.loginForm.yzm) {
				this.formRule.yzmRule = "请输入正确的验证码!"
			} else {
				this.formRule.yzmRule = ""
				num++
			}
			
			if(! (this.loginForm.userpwn.length>=6&&this.loginForm.userpwn.length<=12 )){
				
				this.formRule.userpwnRule = "请输入长度为6~12的密码!"
			}else{
				this.formRule.userpwnRule =""
				num++
			}

			return (num >= keys.length);
		},

    }
  }
  
</script>

<style lang="scss" scoped>


  .register-container {
    width: 100%;
	padding: 0 48rpx;
	.title{
		text-align: center;
		margin-top: 80rpx;
		font-size: 56rpx;
		color: #000000;
	}
	.desc{
		margin-top: 16rpx;
		text-align: center;
		font-size: 26rpx;
		color: #969799;
	}
   

   .login-btn{
	   margin-top: 164rpx;
	   letter-spacing:12rpx;
   }
    .yzm{
		margin-top: 48rpx;
		text-align: center;
		color: #0973F4;

		
	}
  }

</style>
